<template>
    <div class="edit-popup">
        <popup
            ref="popupRef"
            title="投放人员"
            :async="true"
            width="750px"
            @confirm="handleSubmit"
            @close="handleSubmit"
             class="compact-popup"
        >

            <el-card class="!border-none mb-2" shadow="never">
                <el-form class="mb-[-16px]" :model="queryParams" inline>
                    <el-form-item label="微信号" prop="wechat">
                        <el-input class="w-[280px]" v-model="queryParams.wechat" clearable placeholder="请输入微信号" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="resetPage">查询</el-button>
                        <el-button @click="resetParams">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-card>

            <el-card class="!border-none" v-loading="pager.loading" shadow="never">
                <div class="mt-2">
                    <el-table :data="pager.lists" class="compact-table">
                        <el-table-column label="微信号" prop="wechat" show-overflow-tooltip />
                        <el-table-column label="投放时间" prop="create_time" show-overflow-tooltip />
                    </el-table>
                </div>
                <div class="flex mt-2 justify-end">
                    <pagination v-model="pager" @change="getLists" />
                </div>
            </el-card>
        </popup>
    </div>
</template>

<script lang="ts" setup  name="tencentAdvertisingUserAdListPlacementLogWechat" >
import type { FormInstance } from 'element-plus'
import Popup from '@/components/popup/index.vue'
import { ElInput } from 'element-plus'
import { usePaging } from '@/hooks/usePaging'
import {
    apiTencentAdvertisingUserAdListWechatLists,
} from '@/api/tencent_advertising_user_ad_list_wechat'
const emit = defineEmits(['success','close'])
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('placement_log')

const props = defineProps({
    log_id: {
        type: String,
        default: ''
    }
})

// 查询条件
const queryParams = reactive({
    log_id: props.log_id,
    wechat: '', // 添加微信号搜索字段
})

// 分页相关
const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: apiTencentAdvertisingUserAdListWechatLists,
    params: queryParams
})

//打开弹窗
const open = (type = 'placement_log_wechat') => {
    mode.value = type
    popupRef.value?.open()
}
const handleSubmit = async () => {
    popupRef.value?.close()
    emit('success')
}


onActivated(() => {
    queryParams.log_id=props.log_id
    getLists()
})

onMounted(() => {
    queryParams.log_id=props.log_id
    getLists()
})

defineExpose({
    open,
})
</script>
<style scoped>
.compact-table {
  height: 350px;
}

/* 减少弹窗内部间距 */
:deep(.el-card__body) {
  padding: 10px;
}

/* 减少表单项间距 */
:deep(.el-form-item) {
  margin-bottom: 8px;
}

/* 减少弹窗头部与内容的间距 */
:deep(.el-dialog__body) {
  padding-top: 10px;
}

/* 减少卡片间的间距 */
.mb-2 {
  margin-bottom: 8px;
}

/* 减少表格上方间距 */
.mt-2 {
  margin-top: 8px;
}
</style>